import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'
import { ref } from 'vue'
import Message from '@/components/library/Message'
import veeValidateSchema from '@/utils/vee-validate-schema'

export const useLazyData = (apiFn) => {
  // stop             用于停止检测函数
  // target           被检测的元素
  // isIntersecting   布尔值，元素是否可见 true/false
  const goods = ref([])
  const target = ref(null)
  const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
    // 如果元素可以，发送请求获取数据，并停止检测避免重复发送请求
    if (isIntersecting) {
      // 调用 API 获取数据
      apiFn().then(({ result }) => {
        //   console.log(result)

        goods.value = result
      })
      stop()
    }
  })
  // 钩子函数返回---> 响应式数据（目标元素, 后台数据）
  return { goods, target }
}
// // 定时器
export const useTimer = (apiFn, form) => {
  // console.log(apiFn, form)
  // 定时器
  const number = ref(0)
  const formCom = ref(null)
  const { resume, pause } = useIntervalFn(() => {
    number.value--
    if (number.value <= 0) {
      pause()
    }
  }, 1000, { immediate: false })
  // 点击发送验证码
  const send = async () => {
    // console.log(1)
    // 校验单个
    const valid = veeValidateSchema.mobile(form.mobile)
    if (valid === true) {
      if (number.value !== 0) return
      try {
        await apiFn()
        Message({ type: 'success', message: '发送验证码成功' })
        number.value = 60
        resume()
      } catch (error) {
        Message({ type: 'error', message: error.response.data.message || '获取短信失败' })
      }
    } else {
      formCom.value.setFieldError('mobile', valid)
    }
  }
  return { send, formCom, number }
}
